<template>
	<div class="page">
		<div class="nav-view">
			<div class="icon"></div>
			<div class="nav">为了您的账户安全，请先验证手机号</div>
		</div>
		<div>
			<CAccountFPwd2PhoneView
				:data="data"
				@on-action="click2Action">
			</CAccountFPwd2PhoneView>
		</div>
	</div>
</template>

<script>
import CAccountFPwd2PhoneView from '@/pages/account/view/CAccountFPwd2PhoneView'

import AccountService from '@/services/AccountService.js'
const $accountService = AccountService();

export default {
	components: {
		CAccountFPwd2PhoneView
	},
	data() {
		return {
			data: {
				vcodeCount: 60,
				getVCodeDisabled: false,
				isSubmitLoading: false,
				params: {
					phone: '',
					vcode: ''
				}
			}
		}
	},
	mounted() {
		
	},
	methods: {
		click2Action(type, data) {
			if(type == 'get-vcode') {
				this.getVCode();
			}
		},
		vertifyVCode(){
			let $this = this;
			let phone = this.forgetPwdParmas.phone;
			let type = 1;
			let vcode = this.forgetPwdParmas.vcode;
			AccountService().vertifyVCode(phone, type, vcode)
			.then(function(res) {
				let result = res.data;
				let rescode = res.data.rescode;
				if (rescode == 100) {
					$this.tempToken = result.data.tempToken;
					$this.success = true;
					$this.$Message.success('提交成功!');
				} else {
					$this.$Message.error(result.msg)
				}
			})
		},
		getVCode(phone) {
			var $this = this;
			$this.data.getVCodeDisabled = true;
			$accountService.sendVCode(phone, 1)
			.then(function(res) {
				let result = res.data;
				let rescode = res.data.rescode;
				if (rescode == 100) {
					
				} else {
					$this.$Message.error(result.msg)
				}
			})
		},
		vcodeCountDown() {
			let nums = 60;
			$this.codeNum = nums + '秒';
			let clock = setInterval(() => {
				nums--;
				if(nums > 0) {
					$this.codeNum = nums + '秒';
				} else {
					clearInterval(clock);
					$this.disabled = false;
					nums = 60;
				}
			}, 1000);
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
	background-color: rgb(232,236,244);
	width:100%;
	min-width: 1000px;
	overflow:auto;
	top:84px;
	position:absolute;
	z-index:10;
	bottom:100px;
	padding: 100px 150px;
}
.page .nav-view {
	background-color: #fff;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	height: 100px;
}

.page .nav-view .icon {
	width: 50px;
	float: left;
	background: url(../../assets/prompt.png) no-repeat left center;
	height: 100%;
	margin-left: 50px;
}

.page .nav-view  .nav {
	float: left;
	height: 100%;
	line-height: 100px;
	padding-left: 20px;
	font-size: 14px;
	color: rgba(0,0,0,0.87);
}

</style>
